<html>

<head>
    <style>
        /** typeahead css */

        .twitter-typeahead,
        .tt-hint,
        .tt-input,
        .tt-menu {
            width: 100%;
        }

        .tt-suggestion {
            height: 80px;
            padding: 0 10px;
            vertical-align: middle;
        }

        .tt-suggestion:hover {
            background-color: #e2e2e2;
            color: #fff
        }

        .tt-cursor {
            background-color: #5FB878;
            color: #fff
        }

        .tt-selectable+.tt-selectable {
            border-top: 1px solid #ccd6dd;
        }

        /* .detail-card-head
        .detail-card-foot{
            height: 30%;
        } */
        .detail-card-body{
            /* height: 40%; */
            font-size: 120%;
            margin: 5;
        }
        .detail-valid {
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            width: 90%;
            display: block;

        }
    </style>
</head>

<body>

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form" id="the-basics">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input class="layui-input" type=" text" placeholder="搜索通函标题或者编号" width=100% autofocus="autofocus">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script id="result-template" type="text/x-handlebars-template">
        <div class="layui-fluid detail-card">
            <div class="layui-row detail-card-head">
                <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
                        {{code}}
                </div>
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        {{release}}
                </div>
            </div>
            <div class="layui-row  detail-card-body">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        {{title}}
                </div>
            </div>
            <div class="layui-row detail-card-foot">
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <span class="detail-valid">{{valid}}</span>
                </div>
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        {{type_}}
                </div>
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        {{open_}}
                </div>
            </div>
        </div>

    </script>
</body>

</html>